<template>
        <div><div>
        <el-page-header @back="goBack" content="文章更新">
        </el-page-header>
    </div>
        <div id="fon">
            <el-form ref="form" :model="article" label-width="80px">
                <el-form-item label="文章标题">
                    <el-input v-model="article.title"></el-input>
                </el-form-item>
                <el-form-item label="文章类别">
                    <el-input v-model="article.category"></el-input>
                </el-form-item>
                <el-form-item label="更新时间">
                    <el-col :span="11">
                        <el-date-picker type="date" placeholder="选择日期" v-model="article.updateDate" style="width: 100%;"></el-date-picker>
                    </el-col>
                </el-form-item>
                <el-form-item label="文章摘要">
                    <el-input type="textarea" v-model="article.desc"></el-input>
                </el-form-item>
                <el-form-item label="文章内容">
                    <mavon-editor v-model="article.context" ref="md" @imgAdd="$imgAdd" @change="change" style="min-height: 600px"/>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit(article)">修改</el-button>
                </el-form-item>
            </el-form>
        </div></div>


</template>

<script>
    import { mavonEditor } from 'mavon-editor'
    import 'mavon-editor/dist/css/index.css'
    export default {
        name: "ArticleUpdate",
        components: {
            mavonEditor,
        },
        data() {
            return {
               article: {
                    articleId:0,
                    title: '你好成都',
                    category: '生活',
                    publishDate: '2020/5/18',
                    updateDate:  '2020/5/19',
                    context: '成都我来了',
                    html:'',    // 及时转的html
                    configs: {},
                    desc:'',
                },
            }
        },
        methods: {
            goBack(){
                history.go(-1)
            },
            onSubmit(article) {
                let adminArticleVo={
                    articleId:article.articleId,
                    title:article.title,
                    category:article.category,
                    desc:article.desc,
                    context:article.context,
                    updateDate:article.updateDate
                }
                    const _this=this
                axios.post('http://localhost:8084/admin/article/update',adminArticleVo).then(function (resp) {
                    if (resp.data.code==0){
                        _this.$message({
                            type: 'success',
                            message: '修改成功!'
                        });
                        _this.$router.push('/admin/article')
                    }
                })
            },
            change(value, render){
                // render 为 markdown 解析后的结果[html]
                this.form.html = render;
            },
            // 将图片上传到服务器，返回地址替换到md中
            $imgAdd(pos, $file){
                let formdata = new FormData();

                this.$upload.post('/上传接口地址', formdata).then(res => {
                    console.log(res.data);
                    this.$refs.md.$img2Url(pos, res.data);
                }).catch(err => {
                    console.log(err)
                })
            },
        },
        created() {
            const _this=this
            let articleId=this.$route.query.articleId
            axios.get("http://localhost:8084/admin/article/"+articleId).then(function (resp) {
                console.log(resp)
                _this.article=resp.data.data
            })
        }
    }
</script>

<style scoped>
#fon{
    margin-top: 100px;
}
</style>